<template>
  <div class="edit">
    <div class="edit-return">
      <div class="returnBtn" @click="open">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
      <div class="modelTitle">
        <span>{{this.$route.query.moduleName}}</span>
      </div>
    </div>
    <div class="edit-Title">
      <el-input
        type="text"
        placeholder="请输入标题"
        v-model="mobule.title"
        maxlength="22"
        show-word-limit
      ></el-input>
    </div>
    <div class="edit-content">
      <Editor @getContent="getContent"></Editor>
    </div>
    <submitBtn @click.native="commit()"></submitBtn>
  </div>
</template>
<script>
import Editor from "@/components/editor.vue";
import { addModule } from "@/api/module";
import { addByModuleId } from "@/api/module_picture";
import submitBtn from "@/components/submitBtn";
export default {
  components: {
    submitBtn,
    Editor,
  },
  data() {
    return {
      modulePictures: [],
      mobule: {
        relationshipId: this.$route.query.id,
        title: "",
        text: "",
      },
    };
  },
  mounted() {
    console.log(this.mobule.relationshipId)
  },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.query.id != from.query.id) {
        
        this.$router.go(0); 
         //重新加载数据
      }
      
    },
  },
  methods: {
    getContent(text, fileList) {
      this.mobule.text = text;
      this.modulePictures = fileList;
      console.log(this.modulePictures);
    },
    commit() {
      console.log("addModule");
      addModule(
        this.mobule.relationshipId,
        this.mobule.title,
        this.mobule.text
      ).then((res) => {
        addByModuleId(this.modulePictures, res.data.module.id).then(() => {
          this.$router.push({
            path: "/home",
          });
        });
      });
    },
    open() {
      this.$confirm("即将退出编辑", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已经清除编辑区",
          });
          this.$router.go(-1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
};
</script>
<style>
.edit .edit-return {
  height: 40px;
  margin: 10px auto;
  color: #909399;
  font-weight: 900;

  width: 100%;
}
.edit > * {
  border-bottom: solid 1px rgb(243, 237, 237) !important;
}
.returnBtn {
  float: left;
}
.edit-content {
  margin-top: 60px;
}
.returnBtn:hover {
  cursor: pointer;
  color: #e6a23c;
}
.modelTitle {
  height: 40px;
  width: 100px;
  margin: 5px auto;
}
</style>